<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #c1{
            fill:#fac ;
            stroke:skyblue ;
            transition: all 10s linear ;
        }
        #c2{
            fill:#f00 ;
            transition: all 10s linear ;
            stroke:lightgreen ;
        }
    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" 
    width="300" height="300" style="border:#aaa solid" >
        <g>
            <path d="M0 10 H100 M0 20 H100 M0 30 H100 M0 40 H100 M0 50 H100 M0 60 H100 M0 70 H100 M0 80 H100 M0 90 H100
                    M10 0 V100 M20 0 V100 M30 0 V100 M40 0 V100 M50 0 V100 M60 0 V100 M70 0 V100 M80 0 V100 M90 0 V100" 
            stroke="#aaa" stroke-width=".2" fill="none"/>
            <text x="0" y="3" font-size="3">0</text>
            <text x="8" y="3" font-size="3">10</text>
            <text x="18" y="3" font-size="3">20</text>
            <text x="28" y="3" font-size="3">30</text>
            <text x="38" y="3" font-size="3">40</text>
            <text x="48" y="3" font-size="3">50</text>
            <text x="58" y="3" font-size="3">60</text>
            <text x="68" y="3" font-size="3">70</text>
            <text x="78" y="3" font-size="3">80</text>
            <text x="88" y="3" font-size="3">90</text>
            <text y="11" x="0" font-size="3">10</text>
            <text y="21" x="0" font-size="3">20</text>
            <text y="31" x="0" font-size="3">30</text>
            <text y="41" x="0" font-size="3">40</text>
            <text y="51" x="0" font-size="3">50</text>
            <text y="61" x="0" font-size="3">60</text>
            <text y="71" x="0" font-size="3">70</text>
            <text y="81" x="0" font-size="3">80</text>
            <text y="91" x="0" font-size="3">90</text>
        </g>
        <!-- enter your code -->
        
        <path id="c1" d="M20 50 A30 30 0 0 1 80 50 A30 30 0 0 1 20 50"
              stroke-width="2"  />

        <path id="c2" d="M65 50 A15 15 0 0 1 35 50 A15 15 0 0 1 65 50"
             stroke-width="2" />
    </svg>
</body>
</html>
<script>
    const colors = ['#fac','#caf','#f00','#ff0' , 'skyblue','darkmagenta' , 'lightgreen','brown'];
    const c1 = document.querySelector('#c1');
    const c2 = document.querySelector('#c2');

    //设置虚线及偏移
    const length1 = c1.getTotalLength();
    let length2 = c2.getTotalLength();

    c1.setAttribute('stroke-dasharray',length1) ;
    c1.style['stroke-dashoffset'] = length1 ;
    c1.style.stroke = colors[5];
    c1.style.fill = colors[1];
    c2.setAttribute('stroke-dasharray',length2) ;
    c2.style['stroke-dashoffset'] = length2 ;
    c2.style.fill = colors[3];
    c2.style.stroke = colors[7]
    
    let len1 = length1 ;
    let i1 = 1 ;
    let i3 = 5 ;
    c1.ontransitionend = function (e) {
        if(e.propertyName == 'fill'){
            i1 = (i1+1)%2 ;
            c1.style.fill = colors[i1];
        }
        if(e.propertyName == 'stroke'){
            i3 = (i3+1)%2 + 4 ;
            c1.style.stroke = colors[i3] ;
        }
        if(e.propertyName == 'stroke-dashoffset'){
            len1 += length1  ;
            c1.style['stroke-dashoffset'] = len1 ;
        }
    }

    let i2 = 3;
    let i4 = 7 ;
    let len2 = length2 ;
    c2.ontransitionend = function (e) {
        if(e.propertyName == 'fill'){
            i2 = (i2+1)%2 + 2;
            c2.style.fill = colors[i2];
        }
        if(e.propertyName == 'stroke'){
            i4 = (i4+1)%2 + 6 ;
            c2.style.stroke = colors[i4] ;
        }
        if(e.propertyName == 'stroke-dashoffset'){
            len2 += length2  ;
            c2.style['stroke-dashoffset'] = len2 ;
        }
    }
    
</script>
